<template>
  <div class="hot">
    <h2 class="title">
      正在热映({{hotList.length}}部)
      <i class="iconfont icon-you"></i>
    </h2>
    <ul class="hotlist">
      <template v-for="(item,index) in hotList">
        <li class="hotItem" :key="item.id" v-if="index<8" @click="movieDetail(item.id)">
          <div class="movieCover">
            <span class="score" v-if="item.r>0">{{item.r}}</span>
            <img :src="item.img" />
          </div>
          <p class="movieTitle">{{item.t}}</p>
        </li>
      </template>
    </ul>
    <h2 class="title">
      即将上映({{totalComingMovie}}部)
      <i class="iconfont icon-you"></i>
    </h2>
  </div>
</template>

<script>
export default {
  name: "hot",
  components: {},
  props: {
    hotList: Array,
    totalComingMovie: Number
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    movieDetail(id) {
      console.log(id);
      this.$router.push({
        name: "movieDetail",
        params: {
          id
        }
      });
    }
  },
  created() {},
  mounted() {
    // console.log(this.hotList);
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.hot {
  padding: 0 vw(16);
  border-bottom: vw(20) solid #f6f6f6;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: vw(22);
    padding: vw(10) 0;
    i {
      font-size: vw(20);
      color: #bbbbbb;
    }
  }
  .hotlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: vw(1) solid #dfdfdf;
    .hotItem {
      width: vw(76);
      .movieCover {
        width: 100%;
        height: vw(113);
        border: 1px solid #ccc;
        overflow: hidden;
        position: relative;
        img {
          height: 100%;
        }
        span {
          font-size: vw(12);
          position: absolute;
          top: 0;
          right: 0;
          color: #fff;
          background: #659d0e;
          padding: vw(3);
        }
      }
      .movieTitle {
        line-height: 1.2;
        font-size: vw(14);
        text-align: center;
        margin: vw(10) 0;
        height: vw(33);
        overflow: hidden;
      }
    }
  }
  .ad {
    width: 100%;
  }
}
</style>